<template>
  <a-modal
    class="profile-task-dialog"
    v-model:open="taskDetailVisible"
    width="37.5vw"
    :footer="null"
    :title="$t('dialog.profile_task.title')"
  >
    <template v-if="taskDetailData">
      <header>
        <div class="title">
          <span class="bold">{{ taskDetailData.title }}</span>
          <span
            >（{{ $t("dialog.task_detail.task_no") }}：{{
              taskDetailData.task_no
            }}）</span
          >
        </div>
        <div class="footer">
          <div class="publisher">
            <IconUser></IconUser>
            <span
              >{{ $t("dialog.task_detail.publisher") }}：{{
                taskDetailData.member_last_name + ' ' +
                taskDetailData.member_first_name
              }}</span
            >
          </div>
          <div class="create_time">
            {{ $t("dialog.task_detail.create_time") }}：{{
              taskDetailData.create_time
            }}
          </div>
        </div>
      </header>
      <main>
        <section class="desc">
          <div class="title">{{ $t("dialog.task_detail.task_desc") }}</div>
          <div class="raw-html">
            <div class="ql-editor" v-html="taskDetailData.content"></div>
          </div>
        </section>
        <section v-if="followList && followList.length > 0">
          <div class="title">{{ $t("dialog.task_detail.task_follow") }}</div>
          <div class="follow-list">
            <div
              class="item"
              :class="item.show ? 'show' : ''"
              v-for="item in followList"
              :key="item.id"
              @click="item.show = !item.show"
            >
              <div class="title">
                <div>
                  <div class="name">{{ item.member_last_name +' '+ item.member_first_name }}</div>
                  <div class="time">
                    <span>{{ item.create_time }}</span>
                  </div>
                </div>
                <IconArrowDown class="svg" fill="#5A6B85" />
              </div>
              <div class="content">
                <div class="inner">
                  <div class="raw-html">
                    <div class="ql-editor" v-html="item.content"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </template>
    <template v-else>
      <div class="pc-skeleton">
        <div class="row">
          <Skeleton :rows="2" block pc></Skeleton>
        </div>
        <br />
        <div class="row">
          <Skeleton :rows="2" block pc></Skeleton>
        </div>
        <br />
        <div class="row">
          <Skeleton :rows="4" full block pc></Skeleton>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { postTaskDetail, postTaskFollowUpList } from "../../../api/task";
import { useMemberStore } from "../../../store";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;
const memberStore = useMemberStore();

type Props = {
  id: any;
};

const taskDetailVisible = ref(false);

const props = defineProps<Props>();

const taskDetailData = ref();
let cache_id: any = null;
const showDialog = async () => {
  taskDetailVisible.value = true;
  if (cache_id === props.id) {
    return;
  }
  taskDetailData.value = null;
  cache_id = props.id;
  let res = await postTaskDetail(cache_id);
  taskDetailData.value = res.data;
  getFollowList();
};

const followList = ref();
const getFollowList = async () => {
  followList.value = undefined;
  let res = await postTaskFollowUpList(cache_id);
  followList.value = res.data || [];
  if (followList.value.length > 0) {
    followList.value[0].show = true;
  }
};

defineExpose({
  showDialog,
});
</script>
<style lang="less">
.profile-task-dialog {
  .ant-modal-content {
    padding: 24px !important;
    .ant-modal-close {
      width: 22px;
      height: 22px;
      top: 24px;
      right: 24px;
      border-radius: 0;
      svg {
        width: 22px;
        height: 22px;
      }
    }
    .ant-modal-header {
      margin-bottom: 8px;
      .ant-modal-title {
        font-size: 18px;
        color: #172026;
      }
    }
    .ant-form {
      .ant-form-item-label {
        width: 100px;
      }
      .ant-input {
        height: 40px;
        padding: 10px 8px;
        font-size: 14px;
        color: #36434d;
      }
    }
  }
  .form-file-item {
    .ant-form-item-control {
      justify-content: center;
    }
  }
}
// 任务详情弹窗
.profile-task-dialog {
  .ant-modal-body {
    font-size: 16px;
    header {
      margin-left: -24px;
      margin-right: -24px;
      background-color: #f6f8fa;
      padding: 24px;
      color: rgb(64, 73, 96);
      font-size: 14px;
      .bold {
        font-size: 18px;
        font-weight: 600;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        & > * {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
    }
    main {
      section {
        & > .title {
          margin: 16px 0;
          font-size: 14px;
          color: rgb(90, 107, 133);
        }
        &.desc {
          color: rgb(90, 107, 133);
        }
        .follow-list {
          display: flex;
          flex-direction: column;
          .item {
            .title {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 5px 16px;
              background-color: rgb(246, 248, 250);
              border-bottom: 1px solid rgb(205, 214, 222);
              gap: 16px;
              & > div:first-child {
                min-width: 1px;
                flex: 1;
                text-overflow: ellipsis;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
              }
              .svg {
                flex-shrink: 0;
                transition: all 0.3s;
              }
            }
            .content {
              display: grid;
              grid-template-rows: 0fr;
              min-height: 0;
              transition: all 0.3s;
              & > div {
                overflow: hidden;
                & > div {
                  padding: 8px 16px;
                }
              }
            }
            &.show {
              .title {
                .svg {
                  transform: rotate(-180deg);
                }
                & + .content {
                  grid-template-rows: 1fr;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
